<script lang="jsx" setup>
import { nextTick, ref } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { UUID } from 'uuidjs';
import useResetTableRef from '@/hooks/common/resetTableRef';
import {
  addInteriorEcn,
  getProductionModelId,
  getWIPInventory
} from '@/service/api/modules/engineering-manage/interior-ecn';
import { deepClone } from '@/utils';
import Add from './modules/add.vue';

const commonSearchRef = ref(null);
const [searchParams, resetSearchParams] = useResetTableRef({
  moduleNo: null
});

const useModal = window.$useModal;

const formList = [
  {
    type: 'input',
    key: 'moduleNo',
    label: '新生产型号',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 4,
    placeholder: '请输入新生产型号'
  }
];

const topTableRef = ref(null);
const topColumn = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'oldModuleNo',
    dataIndex: 'oldModuleNo',
    title: '生产型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160,
    customRender: ({ record }) => {
      return <span class="fonw-800 color-red">{record.oldModuleNo}</span>;
    }
  },
  {
    key: 'newModuleNo',
    dataIndex: 'newModuleNo',
    title: '新生产型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160,
    customRender: ({ record }) => {
      return <span class="fonw-800 color-#646cff">{record.newModuleNo}</span>;
    }
  },
  {
    key: 'newCustProdNo',
    dataIndex: 'newCustProdNo',
    title: '新客户型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'newSameModuleNo',
    dataIndex: 'newSameModuleNo',
    title: '新同等型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'newSurfTrea1',
    dataIndex: 'newSurfTrea1',
    title: '新型号特性',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 140
  },
  // {
  //   key: 'remark',
  //   dataIndex: 'remark',
  //   title: '备注',
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true
  // },
  {
    key: 'effectiveTiming',
    dataIndex: 'effectiveTiming',
    title: '生效时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 140
  },
  {
    key: 'customerCheck',
    dataIndex: 'customerCheck',
    title: '客户确认',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return record.customerCheck === '1' ? '已确认' : '';
    },
    width: 120
  },
  {
    key: 'oldDataDeal',
    dataIndex: 'oldDataDeal',
    title: '旧资料处理方法',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'nowboardDealMethod',
    dataIndex: 'nowboardDealMethod',
    title: '在线板处理方法',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'inventoryDealMethod',
    dataIndex: 'inventoryDealMethod',
    title: '库存板处理方法',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'changeReason',
    dataIndex: 'changeReason',
    title: '变更原因',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'otherReason',
    dataIndex: 'otherReason',
    title: '其他原因',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '创建人',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 140
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '创建时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 160
  }
];

const bottomLeftTableRef = ref(null);
const bottomSearchParams = ref({
  prodId: null
});
const bottomColumn = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  // {
  //   key: 'deptCaption',
  //   dataIndex: 'deptCaption',
  //   title: '工序名称',
  //   width: 120,
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true
  // },
  {
    key: 'techName',
    dataIndex: 'techName',
    title: '工艺名称',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'repeatCount',
    dataIndex: 'repeatCount',
    title: '工步',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'wipPnlQty',
    dataIndex: 'wipPnlQty',
    title: 'PNL结存',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'wipSetQty',
    dataIndex: 'wipSetQty',
    title: 'SET结存',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'wipscrapSet',
    dataIndex: 'wipscrapSet',
    title: '含废SET',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'wipscrapPcs',
    dataIndex: 'wipscrapPcs',
    title: '含废PCS',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'wippcsQty',
    dataIndex: 'wippcsQty',
    title: '有效PCS',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'applyScrapQty',
    dataIndex: 'applyScrapQty',
    title: '报废申请',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'applyReworkQty',
    dataIndex: 'applyReworkQty',
    title: '重工申请',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'assitQty',
    dataIndex: 'assitQty',
    title: '外发数',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'holdPcsQty',
    dataIndex: 'holdPcsQty',
    title: '暂停PCS数',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'iqcPcsQty',
    dataIndex: 'iqcPcsQty',
    title: 'IQC数量',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'delayDate',
    dataIndex: 'delayDate',
    title: '结存小时',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  }

  // { header: "结存小时", dataIndex: 'delayDate', renderer: function (v) { if (v) return Ext.util.Format.number(v, '0.00') }, width: 60, sortable: false }
];

const addRef = ref(null);
const { handleClose, handleLoading, handleShow } = useModal({
  modalOption: {
    title: '新增',
    destroyOnClose: true,
    width: '800px',
    height: '600px'
  },
  component: () => <Add ref={addRef} />,
  onOk: async () => {
    const data = { ...addRef.value };
    const formData = deepClone(data.model);
    formData.changeReason = formData?.changeReason?.join(',') || null;
    formData.customerCheck = formData.customerCheck ? '1' : '0';
    formData.pnType = formData.pnType ? '量产' : null;
    await data.validateForm();
    handleLoading(true);
    addInteriorEcn({ ...formData })
      .then(({ error }) => {
        if (!error) {
          window.$message.success('操作成功');
          handleClose();
          search();
        }
      })
      .finally(() => {
        handleLoading(false);
      });
  }
});

function handleAdd(row) {
  handleShow();
}

function handelDel() {}

const tabaleSelect = ref([]);
function handleTopTableSelectChange(val) {
  tabaleSelect.value = val;
}

const bottomLeftDataSource = ref([]);

function handleTopTableRowClick(row) {
  nextTick(() => {
    getProductionModelId(row.oldModuleNo).then(({ data, error }) => {
      if (!error) {
        if (data?.list?.length) {
          bottomSearchParams.value.prodId = data.list[0].prodId;
          getWIPData();
        }
      }
    });
  });
}

const loading = ref(false);
function getWIPData() {
  loading.value = true;
  getWIPInventory({ prodId: bottomSearchParams.value.prodId })
    .then(({ data, error }) => {
      if (!error) {
        data.pubtechnology.forEach((item, index) => {
          item.dataIndex = index + 1;
          item.tableUuid = UUID.genV4().hexNoDelim;
        });
        bottomLeftDataSource.value = data.pubtechnology;
      } else {
        bottomLeftDataSource.value = [];
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

function handleTopTableLoadSuccess(data) {
  if (!data?.length) return;
  topTableRef.value.setCurrentRowId(data[0]);
  nextTick(() => handleTopTableRowClick(data[0]));
}

const bottomRightTableRef = ref(null);
const bottomRightSearchParams = ref({
  prodId: null,
  techId: null
});

const bottomRightColumn = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'wipState',
    dataIndex: 'wipState',
    title: '结存状态',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'barCode',
    dataIndex: 'barCode',
    title: '批卡号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180
  },
  {
    key: 'prodOrderNo',
    dataIndex: 'prodOrderNo',
    title: '工单号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180
  },
  {
    key: 'custDateCode',
    dataIndex: 'custDateCode',
    title: '客户周期',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180
  },
  {
    key: 'dateCode',
    dataIndex: 'dateCode',
    title: '厂内周期',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180
  },
  {
    key: 'wipUnit',
    dataIndex: 'wipUnit',
    title: '结存单位',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'wipQty',
    dataIndex: 'wipQty',
    title: '结存数量',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'wipScrapSet',
    dataIndex: 'wipScrapSet',
    title: '结存报废SET',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'wipScrapPcs',
    dataIndex: 'wipScrapPcs',
    title: '结存报废PCS',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'outUnit',
    dataIndex: 'outUnit',
    title: '出账单位',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'outQty',
    dataIndex: 'outQty',
    title: '出账数',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'outScrapSet',
    dataIndex: 'outScrapSet',
    title: '出账报废SET',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'outScrapPcs',
    dataIndex: 'outScrapPcs',
    title: '出账报废PCS',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'workingQty',
    dataIndex: 'workingQty',
    title: '在产数量',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'finishQty',
    dataIndex: 'finishQty',
    title: '完成数量',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'workDate',
    dataIndex: 'workDate',
    title: '生产时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'finishDate',
    dataIndex: 'finishDate',
    title: '完成时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'scrapUnit',
    dataIndex: 'scrapUnit',
    title: '申请单位',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'scrapQty',
    dataIndex: 'scrapQty',
    title: '申请数量',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'inDate',
    dataIndex: 'inDate',
    title: '入账时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'workDays',
    dataIndex: 'workDays',
    title: '生产时长',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'qty',
    dataIndex: 'qty',
    title: '批卡数量',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'unit',
    dataIndex: 'unit',
    title: '批卡单位',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'weight',
    dataIndex: 'weight',
    title: '单重',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '入账员',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  }
];

function handleBottomLeftTableRowClick(row) {
  bottomRightSearchParams.value = {
    prodId: row.prodId,
    techId: row.techId
  };

  nextTick(() => {
    bottomRightTableRef.value.getData();
  });
}

function handleBottomLeftTableLoadSuccess(data) {
  if (!data?.length) return;
  bottomLeftTableRef.value.setCurrentRowId(data[0]);
  handleBottomLeftTableRowClick(data[0]);
}

function search() {
  topTableRef.value.getData();
}

function reset() {
  resetSearchParams();
  search();
}
</script>

<template>
  <div class="h-full w-full flex-col-stretch gap-8px overflow-hidden lt-sm:overflow-auto">
    <CommonSearch
      ref="commonSearchRef"
      v-model:searchParams="searchParams"
      :form-list="formList"
      @search="search"
      @reset="reset"
    ></CommonSearch>
    <!-- <div class="table" :style="{ height: `calc(100% - ${height}px)` }"> -->
    <!-- <div class="top mb-0.5% h-50%"> -->
    <Table
      ref="topTableRef"
      v-model:searchParams="searchParams"
      :column="topColumn"
      :show-row-selection="false"
      row-key="ECNno"
      :scroll="{ y: 'auto' }"
      is-init-get-data
      url="/erpsyncmes/Ecn/findModuleNo"
      :auto-generate-uuid="true"
      class="top mb-0.5% h-60%"
      @table-row-click="handleTopTableRowClick"
      @table-data-load-sucess="handleTopTableLoadSuccess"
      @table-select-change="handleTopTableSelectChange"
    >
      <template #title>
        <AButton type="primary" class="mini-btn mr-8px" size="small" ghost @click="handleAdd(null)">
          <template #icon>
            <PlusOutlined class="align-sub" />
          </template>
          新增
        </AButton>

        <!--
 <AButton
          type="primary"
          danger
          class="mini-btn mr-8px"
          size="small"
          ghost
          :disabled="!tabaleSelect.length"
          @click="handelDel()"
        >
          <template #icon>
            <DeleteOutlined class="align-sub" />
          </template>
          删除
        </AButton>
-->
      </template>
    </Table>
    <div class="bottom mb-0.5% h-39.8%">
      <div class="bottom-left bottom-table h-full">
        <Table
          ref="bottomLeftTableRef"
          v-model:searchParams="bottomSearchParams"
          :column="bottomColumn"
          :show-row-selection="false"
          row-key="tableUuid"
          :scroll="{ y: 'auto' }"
          is-init-get-data
          :loading="loading"
          :data-source="bottomLeftDataSource"
          url="/erpsyncmes/wip/selectWipPubtechnology"
          :auto-generate-uuid="false"
          class="h-full"
          :is-pagination="false"
          summary-fixed
          @table-row-click="handleBottomLeftTableRowClick"
          @table-data-load-sucess="handleBottomLeftTableLoadSuccess"
        >
          <template #title>
            <span class="mr15px color-#646cff">WIP结存</span>
          </template>
          <template #summary>
            <STableSummaryRow>
              <STableSummaryCell :index="0" :col-span="2" class="text-center color-blue-600 font-bold">
                本页合计:
              </STableSummaryCell>

              <STableSummaryCell :index="2" class="text-center color-blue-600 font-bold"></STableSummaryCell>
              <STableSummaryCell :index="3" class="text-center color-blue-600 font-bold">
                <template #default="{ total }">{{ Number(total) || '' }}</template>
              </STableSummaryCell>
              <STableSummaryCell :index="4" class="text-center color-blue-600 font-bold">
                <template #default="{ total }">{{ Number(total) || '' }}</template>
              </STableSummaryCell>
              <STableSummaryCell :index="5" class="text-center color-blue-600 font-bold">
                <template #default="{ total }">{{ Number(total) || '' }}</template>
              </STableSummaryCell>
              <STableSummaryCell :index="6" class="text-center color-blue-600 font-bold">
                <template #default="{ total }">{{ Number(total) || '' }}</template>
              </STableSummaryCell>
              <STableSummaryCell :index="7" class="text-center color-blue-600 font-bold">
                <template #default="{ total }">{{ Number(total) || '' }}</template>
              </STableSummaryCell>
              <STableSummaryCell :index="8" class="text-center color-blue-600 font-bold">
                <template #default="{ total }">{{ Number(total) || '' }}</template>
              </STableSummaryCell>
              <STableSummaryCell :index="9" class="text-center color-blue-600 font-bold">
                <template #default="{ total }">{{ Number(total) || '' }}</template>
              </STableSummaryCell>
              <STableSummaryCell :index="10" class="text-center color-blue-600 font-bold">
                <template #default="{ total }">{{ Number(total) || '' }}</template>
              </STableSummaryCell>
              <STableSummaryCell :index="11" class="text-center color-blue-600 font-bold">
                <template #default="{ total }">{{ Number(total) || '' }}</template>
              </STableSummaryCell>
              <STableSummaryCell :index="12" class="text-center color-blue-600 font-bold">
                <template #default="{ total }">{{ Number(total) || '' }}</template>
              </STableSummaryCell>
            </STableSummaryRow>
          </template>
        </Table>
      </div>
      <div class="bottom-right bottom-table h-full">
        <Table
          ref="bottomRightTableRef"
          v-model:searchParams="bottomRightSearchParams"
          :column="bottomRightColumn"
          :show-row-selection="false"
          :scroll="{ y: 'auto' }"
          :is-init-get-data="false"
          url="/erpsyncmes/wip/selectWipByProdIdAndTechId"
          :auto-generate-uuid="true"
          class="h-full"
          :is-pagination="false"
        ></Table>
      </div>
    </div>

    <!-- </div> -->
    <!-- </div> -->
  </div>
</template>

<style lang="scss" scoped>
.bottom {
  display: flex;
  justify-content: space-between;
  .bottom-table {
    width: calc(50% - 5px);
  }
}
</style>
